<template>
  <div>
    <div class="header" :class="showcontent?'active':''">
        <div class="text">
            <span>{{groupDisplayName}}</span>
            <span>|</span>
            <span>{{historyName}}</span>
        </div>
        <ul class="list">
            <li @click="getSJZ()" :class="timeLimeVisible?'active':''">时间轴</li>
            <li @click="getKZ()" :class="!timeLimeVisible?'active':''">历史快照</li>
            <li @click="handleClick">
                <span v-if="showcontent" class="fa  fa-chevron-down"></span>
                <span v-else class="fa fa-chevron-up"></span>
            </li>
        </ul>
    </div>
    <div class="timeline">
        <div class="content" :class="showcontent?'active':''">
            <!-- 时间轴 -->
            <div v-show="timeLimeVisible" style="background:#696969;position:relative" >
                <div id="container" style="height:150px;">
                </div>
                <div class="popover">
                    <el-popover
                        placement="top-start"
                        title="时间轴选择"
                        width="200"
                        trigger="click"
                        popper-class="line-popover"
                        >
                        <ul id="allTimeCheck">
                            <el-checkbox-group v-model="checkedNames">
                                 <el-checkbox @change="changeselect" v-for="(item,index) in allTimeCheck" :key="'item'+index" :label="item"></el-checkbox>
                            </el-checkbox-group>
                        </ul>
                        <el-button slot="reference" icon="el-icon-setting" class="icon_select"></el-button>
                    </el-popover>
                </div>
            </div>
            <!-- 历史快照 -->
            <div v-show="!timeLimeVisible" class="lskz">
                <div v-if="getSnapshotList.length<=0" class="nodata">暂无快照数据</div>
                <li v-else class="box" :class="KZactiveIndex==index?'active':''" @click="selectKZ(index)" v-for="(item,index) in getSnapshotList" :key="'getSnapshotList'+index">
                    <div class="text">
                        <p>{{item.description}}</p>
                        <p>{{item.createTime}}</p>
                    </div>
                    <div class="hoverBox">
                        <el-button type="danger" size="small" @click="delSnapData(item.id,index)" >删除</el-button>
                        <el-button type="primary" @click="editKZ(item.description,item.id,index)" size="small">编辑</el-button>
                    </div>  
                </li>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import util from '@/utils'
import echarts from 'echarts'
import {
    deletedSnap,
    getdetail,// 实例详细信息
  } from '@/api/relationFraph'
export default {
    data () {
        return {
            // 是否展示content
            showcontent:true,
            timeLimeVisible:false,
            // 图表
            chart:'',
            // 快照选择索引
            KZactiveIndex:0,
            // 时间轴x轴数据
            date:[],
            // 时间轴Y轴数据
            num:[],
            // historyName:this.historyName
            // 时间轴y轴对应的对象
            lineDateYN:{},
            // 所有的时间轴选项
            allTimeCheck:[],
            // 已经选择的时间轴选项
            checkedNames:[],
            checkedDefault:true,
            // 当前页面点
            currentMark:[],
            defaultCheck:true

        }
    },
    components:{
    },
    props: ['getSnapshotList','groupDisplayName','historyName'],
    created () {
    },
    watch:{
        // 监听时间轴对象选择
        checkedNames(val){
            // console.log(val)
            // this.filterLineData(this.currentMark,this.checkedNames)
        },
    },
    mounted () {
        if(this.chart){
            window.addEventListener('resize', () => {
               this.chart.resize()
            })
        }
    },
    methods: {
        // 监听时间轴选择
        changeselect(val){
            console.log(1234567)
            console.log(this.currentMark)
            this.filterLineData(this.$parent.allMark,this.checkedNames)
        },
        handleClick() {
            this.showcontent = !this.showcontent
        },
        // 选择时间轴筛选条件去筛选数据
        async filterLineData(value,checklist){
            console.log('laile')
            // 所有的详细信息
            let allDetail = [...value]
            let lineDateX = []
            let lineDateY = new Map()
            let lineDateNum = []
            
            for(let self of allDetail){
                for(let list of self.propertyList){
                    if(checklist.includes(list.propertyName)){
                        // 当是时间属性的时候 保存当前数据
                        if(list.propertyType == "DateTime"){
                            let cV = new Date(list.propertyValues[0].value).valueOf()
                            if(lineDateX.indexOf(cV) == '-1'){
                                lineDateX.push(cV)
                                
                                lineDateY.set(cV,lineDateY.get(cV)?lineDateY.get(cV).push(self.rowkey):[self.rowkey])
                            }else{
                                if(lineDateY.get(cV)){
                                    lineDateY.get(cV).push(self.rowkey)
                                }
                            }
                        } else if(list.propertyType == "TimeInterval"){
                            let cV1 = new Date(list.propertyValues[0].value.timeStart).valueOf()
                            if(lineDateX.indexOf(cV1) == '-1'){
                                lineDateX.push(cV1)
                                lineDateY.set(cV1,lineDateY.get(cV)?lineDateY.get(cV1).push(self.rowkey):[self.rowkey])
                            }else{
                                if(lineDateY.get(cV1)){
                                    lineDateY.get(cV1).push(self.rowkey)
                                }
                            }
                        }
                    }
                }
            }
            lineDateX.sort((a,b)=>{ return a-b})
            this.date = []
            for(let line of lineDateX){
                this.date.push(util.timestampToTime(line))
            }
            for(let item of lineDateX){
                this.num.push(lineDateY.get(item).length)
            }
            this.lineDateYN = lineDateY
            this.$nextTick(()=>{
                // 重新渲染图表
                this.initChart()
                this.chart.on('brushselected', this.renderBrushed)
            })
        },
        // 获取页面上点的详细信息
        async getAllDetail(value){
            this.currentMark = value
            console.log('diyi111111')
            this.date = []
            this.num = []
            // this.allTimeCheck= []
            let currentTimeCheck = []
            // 所有的详细信息
            let allDetail = []
            let lineDateX = []
            let lineDateY = new Map()
            // 清空map
            lineDateY.clear()
            let lineDateNum = []
            for(let item of value){
                let getdetailObj = {
                    rowkey: item.rowkey,
                    objectUri: item.objectUri
                }
                await getdetail(getdetailObj).then(res => {
                    if (res.status == 200) {
                        allDetail.push(res.data)
                        
                    }
                })
            }
            console.log(allDetail)
            for(let self of allDetail){
                for(let list of self.propertyList){
                    // 保存时间属性的属性名称
                    if(list.propertyType == "DateTime" || list.propertyType == "TimeInterval"){
                        // 
                        let name = list.propertyName
                        if(currentTimeCheck.indexOf(name) == '-1'){
                            currentTimeCheck.push(name)
                        }
                    }
                    // 当是时间属性的时候 保存当前数据
                    if(list.propertyType == "DateTime"){
                        let cV = new Date(list.propertyValues[0].value).valueOf()
                        if(lineDateX.indexOf(cV) == '-1'){
                            lineDateX.push(cV)
                            
                            lineDateY.set(cV,lineDateY.get(cV)?lineDateY.get(cV).push(self.rowkey):[self.rowkey])
                        }else{
                            if(lineDateY.get(cV)){
                                lineDateY.get(cV).push(self.rowkey)
                            }
                        }
                    } else if(list.propertyType == "TimeInterval"){
                        let cV1 = new Date(list.propertyValues[0].value.timeStart).valueOf()
                        if(lineDateX.indexOf(cV1) == '-1'){
                            lineDateX.push(cV1)
                            lineDateY.set(cV1,lineDateY.get(cV1)?lineDateY.get(cV1).push(self.rowkey):[self.rowkey])
                        }else{
                            if(lineDateY.get(cV1)){
                                lineDateY.get(cV1).push(self.rowkey)
                            }
                        }
                    }
                }
            }
            lineDateX.sort((a,b)=>{ return a-b})
            console.log(lineDateX)
            this.date = []
            for(let line of lineDateX){
                this.date.push(util.timestampToTime(line))
            }
            for(let item of lineDateX){
                this.num.push(lineDateY.get(item).length)
            }
            this.allTimeCheck = currentTimeCheck
            this.lineDateYN = lineDateY
            this.checkedNames = this.allTimeCheck
            // 重新渲染图表
            this.initChart()
            this.chart.on('brushselected', this.renderBrushed)
        },
        // 获取快照上的对象生成时间轴
        getKZAllDetail(value){
            console.log('diyi')
            console.log(value)
            this.date = []
            this.num = []
            // this.allTimeCheck= []
            let currentTimeCheck = []
            // 所有的详细信息
            let allDetail = [...value]
            let lineDateX = []
            let lineDateY = new Map()
            // 清空map
            lineDateY.clear()
            let lineDateNum = []
            console.log(allDetail)
            for(let self of allDetail){
                if(self.propertyList){
                    for(let list of self.propertyList){
                        // 保存时间属性的属性名称
                        if(list.propertyType == "DateTime" || list.propertyType == "TimeInterval"){
                            // 
                            let name = list.propertyName
                            if(currentTimeCheck.indexOf(name) == '-1'){
                                currentTimeCheck.push(name)
                            }
                        }
                        // 当是时间属性的时候 保存当前数据
                        if(list.propertyType == "DateTime"){
                            for(let [index,listT] of list.propertyValues.entries()){
                                let cV = new Date(list.propertyValues[index].value).valueOf()
                                if(lineDateX.indexOf(cV) == '-1'){
                                    lineDateX.push(cV)
                                    
                                    lineDateY.set(cV,lineDateY.get(cV)?lineDateY.get(cV).push(self.rowkey):[self.rowkey])
                                }else{
                                    if(lineDateY.get(cV)){
                                        lineDateY.get(cV).push(self.rowkey)
                                    }
                                }
                            }
                        } else if(list.propertyType == "TimeInterval"){
                            for(let [index,listT] of list.propertyValues.entries()){
                                let cV1 = new Date(list.propertyValues[index].value.timeStart).valueOf()
                                if(lineDateX.indexOf(cV1) == '-1'){
                                    lineDateX.push(cV1)
                                    lineDateY.set(cV1,lineDateY.get(cV1)?lineDateY.get(cV1).push(self.rowkey):[self.rowkey])
                                }else{
                                    if(lineDateY.get(cV1)){
                                        lineDateY.get(cV1).push(self.rowkey)
                                    }
                                }
                            }
                        }
                    }
                }else {
                    return false
                }
            }
            lineDateX.sort((a,b)=>{ return a-b})
            console.log(lineDateX)
            this.date = []
            for(let line of lineDateX){
                this.date.push(util.timestampToTime(line))
            }
            for(let item of lineDateX){
                this.num.push(lineDateY.get(item).length)
            }
            this.allTimeCheck = currentTimeCheck
            this.lineDateYN = lineDateY
            this.checkedNames = this.allTimeCheck
            console.log(lineDateY)
            console.log(this.date)
            console.log(this.num)
             this.$nextTick(()=>{
                // 重新渲染图表
                this.initChart()
                this.chart.on('brushselected', this.renderBrushed)
            })
        },
        // 根据快照ID删除快照
        delSnapData: function (snapid, index) {
            this.$confirm('删除此快照, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let vm = this
                deletedSnap(snapid).then(res => {
                if (res.status == 200) {
                    vm.$message({
                    message: '成功删除快照',
                    type: 'success'
                    })
                    vm.getSnapshotList.splice(index, 1)
                    console.log('opop')
                    this.selectKZ(index)
                    // vm.handleGetSnapDataById(this.getSnapshotList[0].id,0, this.getSnapshotList[0].description)
                    // this.getSnapshotList[index]
                } else {
                    this.$message.error(res.msg)
                }
                }).catch(error => {
                this.$message.error(error)
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                })         
            })

        },
        // 编辑快照
        editKZ(des,id,index){
            this.$parent.$refs.tooTip.photoVisible = true
            this.$parent.$refs.tooTip.currentSnapId = id
            this.$parent.$refs.tooTip.description = des
            this.$parent.$refs.tooTip.kz_xz = false
            this.$parent.$refs.tooTip.currentBJIndex = index
        },
        // 选择快照
        selectKZ(index){
            // 清除页面所有数据
            this.$parent.$refs.tooTip.clearOverlays()
            this.KZactiveIndex = index
            console.log(this.getSnapshotList[index])
            if(this.getSnapshotList[index]){
                setTimeout(()=>{
                    // 保存此快照上的点对象
                    this.$parent.$refs.tooTip.currentSnapEvent = JSON.parse(this.getSnapshotList[index].graphData)
                    console.log(JSON.parse(this.getSnapshotList[index].graphData))
                    for(let self of JSON.parse(this.getSnapshotList[index].graphData)){
                        let Cdisplayname = self.showName ? self.showName : self.displayName
                        this.$parent.$refs.tooTip.addMarker(self.longitude, self.latitude,self.rowkey,self.objectUri, self.objectType, Cdisplayname, self.name, self.iconUrl, self.belongGroup,self.propertyList)
                    }
                    this.$emit('update:historyName',this.getSnapshotList[index].description)
                },0)
            }
        },
        // 获取时间轴
        getSJZ(){
            this.showcontent = true
            this.$parent.infoVisiable = false
            this.timeLimeVisible = true
            console.log(this.$parent.allMark)
            this.getKZAllDetail(this.$parent.allMark)

        },
        // 历史快照
        getKZ(){
            this.showcontent = true
            this.timeLimeVisible = false
        },
        //时间轴柱状图
        initChart() {
            this.chart = echarts.init(document.getElementById('container'))
            console.log(this.chart)
            var option = null;
            option = {
            // 默认颜色
            color: ['#000'],
            brush: {
                toolbox: ['lineX'],
                xAxisIndex: 'all',
                throttleType: 'debounce',
                throttleDelay: 100,
                outOfBrush: {
                    color: '#ff00f7',
                    colorAlpha: 1
                },
                inBrush: {
                    color: '#d02a1d',
                    colorAlpha: 1
                }
            },
            grid: {
                top: '10%',
                left: '1%',
                right: '1%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: this.date,//时间
                splitLine: {show: false},//去除网格线
                axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#fff',//左边线的颜色
                    width: '2'//坐标线的宽度
                }
                },
                axisLabel: {
                interval:0,
                rotate:40,
                formatter:function(value)
                {
                    return value.split(" ").join("\n");
                },
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
                }
            },
            yAxis: {
                type: 'value',
                minInterval:1,
                splitLine: {show: false},//去除网格线
                axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#fff',//左边线的颜色
                    width: '2'//坐标线的宽度
                }
                },
                axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
                }
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
            ],
            series: [{
                data: this.num,//数据
                type: 'bar',
                itemStyle: {
                normal: {
                    color: '#d27171'
                }
                },
                barWidth: 30
            }]
            };
            this.chart.setOption(option, true);
            this.chart.dispatchAction({
                type: 'takeGlobalCursor',
                key: 'brush',
                brushOption: {
                    brushType: 'lineX'
                }
            });
        },
        // 选择数据
        renderBrushed(params){
            let PD = params.batch[0].selected[0].dataIndex
            let lineData = this.date.slice(PD[0],(PD.length+PD[0]))
            let result = []
            // var allOverlay = this.map.getOverlays()
            //根据选择的时间段筛选出对象
            for(let item of lineData){
                for(let list of this.lineDateYN.get(new Date(item).valueOf()))
                result.push(list)
            }
            if([... new Set(result)].length>0){
                this.$parent.showOverlays([... new Set(result)])
            }
        }
    }

}
</script>
<style lang="less" scoped>
.header{
    position: absolute;
    bottom: 0;
    background: #ffffff;
    transition: bottom 0.2s;
    -webkit-transition: bottom 0.2s; /* Safari */
    &.active{
        bottom:150px;
    }
    .text{
        color:#777;
        font-weight: bold;
        display: flex;
        align-items: center;
        span{
            padding:10px 5px 0 5px;
        }
    }
    .list{
        display: flex;
        li{
            padding: 10px 5px;
            cursor: pointer;
            background: #ffffff;
            &.active{
                color:#08c;
            }
            .fa{
                color:#08c;
            }
        }
    }
}
.timeline{
    .content{
        height:0;
        transition: height 0.2s;
         -webkit-transition: height 0.2s; /* Safari */
        &.active{
            height:150px;
        }
        .lskz{
            background: #696969;
            height: 100%;
            display: flex;
            overflow-y: auto;
            flex-wrap: wrap;
            padding: 10px 0;
            .nodata{
                width:100%;
                display: flex;
                color:#c3c4c4;
                font-size: 18px;
                font-weight: bold;
                align-items: center;
                justify-content: center;
            }
            .box{
                // flex: 0 0 50%;
                width:12%;
                height:0px;
                padding-bottom: 8%;
                background: #ffffff;
                margin: 0 10px;
                margin-bottom: 10px;
                border-radius: 5%;
                position: relative;
                border:5px solid#ffffff;
                cursor: pointer;
                &:hover{
                    .hoverBox{
                        opacity: 1;
                    }
                }
                &.active{
                    border:5px solid#3aa6f0;
                }
                .hoverBox{
                    position: absolute;
                    width:100%;
                    height:100%;
                    opacity: 0;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                    align-items: center;
                    justify-content: center;
                }
                .text{
                    position: absolute;
                    width:100%;
                    height:100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                    p{
                        width: 100%;
                        padding: 10px 0;
                        text-align: center;
                    }
                }
            }
        }
        .popover{
            position:absolute;
            right:0;
            top:0;
            .icon_select{
                background: #000000;
                box-shadow: none;
                border: 1px solid #aaaaaa;
                color: white;
                font-size: 17px;
                padding: 3px;
                width: auto;
                opacity: 0.5;
            }
        }
    }
}
</style>
<style lang="less">
    #allTimeCheck{
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        .el-checkbox{
            margin: 0;
            color: #ffffff;
            width:100%;
        }
    }
    .line-popover{
        background: #444!important;
        color: white;
        opacity: 0.9;
        .el-popover__title{
            color: #ffffff;
            font-weight:bold;
            font-size: 15px;
            line-height: 1;
            margin-bottom: 6px;
            border-bottom: 1px solid#ccc;
            padding-bottom: 6px;
        }
        .popper__arrow{
            &::after{
                border-top-color: #5f5f5f!important;
            }
        }
    }
</style>
